{% extends "base.html" %}

{% block title %}照护计划分表 - 长者照护计划系统{% endblock %}

{% block page_title %}照护计划分表{% endblock %}

{% block extra_css %}
<style>
    .filter-section {
        margin-bottom: 20px;
        padding: 15px;
        border: 1px solid var(--tech-border);
        border-radius: 5px;
        background-color: rgba(1, 1, 43, 0.75);
    }
    
    .filter-input-groups {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
    }
    
    .filter-group {
        flex: 1;
        min-width: 200px;
    }
    
    .time-slot-table {
        color: #fff;
        border: 1px solid var(--tech-border);
    }
    
    .time-slot-table th, .time-slot-table td {
        border: 1px solid var(--tech-border);
        padding: 8px;
        vertical-align: middle;
    }
    
    .time-slot-table th {
        background-color: rgba(5, 238, 255, 0.1);
        color: var(--tech-primary);
        font-weight: 500;
    }
    
    .time-slot-table tbody tr:nth-child(odd) {
        background-color: rgba(1, 1, 43, 0.6);
    }
    
    .time-slot-table tbody tr:hover {
        background-color: rgba(5, 238, 255, 0.1);
    }
    
    .activity-tag {
        display: inline-block;
        padding: 4px 8px;
        border-radius: 4px;
        background-color: rgba(5, 238, 255, 0.2);
        border: 1px solid var(--tech-border);
        margin-right: 5px;
        margin-bottom: 5px;
        font-size: 0.85rem;
    }
    
    .caregiver-badge {
        display: inline-block;
        padding: 4px 8px;
        border-radius: 4px;
        background-color: rgba(5, 178, 255, 0.3);
        border: 1px solid var(--tech-primary);
        font-size: 0.85rem;
    }
    
    .form-control, .form-select {
        background-color: rgba(1, 1, 43, 0.7);
        border: 1px solid var(--tech-border);
        color: #fff;
    }
    
    .form-control:focus, .form-select:focus {
        background-color: rgba(1, 1, 43, 0.9);
        border-color: var(--tech-primary);
        color: #fff;
        box-shadow: 0 0 10px rgba(5, 238, 255, 0.5);
    }
    
    .form-label {
        color: var(--tech-primary);
        font-weight: 500;
    }
    
    .pagination {
        margin-top: 20px;
    }
    
    .pagination .page-item .page-link {
        color: var(--tech-primary);
        background-color: rgba(1, 1, 43, 0.7);
        border-color: var(--tech-border);
    }
    
    .pagination .page-item.active .page-link {
        background-color: var(--tech-primary);
        border-color: var(--tech-primary);
        color: #fff;
    }
    
    .pagination .page-item .page-link:hover {
        background-color: rgba(5, 238, 255, 0.2);
    }
    
    .summary-card {
        background-color: rgba(1, 1, 43, 0.6);
        border: 1px solid var(--tech-border);
        border-radius: 5px;
        padding: 15px;
        margin-bottom: 20px;
    }
    
    .summary-title {
        color: var(--tech-primary);
        margin-bottom: 10px;
        font-weight: 500;
    }
    
    .summary-item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;
        color: #fff;
    }
</style>
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-12">
        <div class="tech-card">
            <div class="tech-card-header">
                <h5 class="card-title"><i class="fas fa-list-alt me-2"></i>照护计划分表</h5>
            </div>
            <div class="tech-card-body">
                <div class="filter-section">
                    <h6 class="mb-3 text-light"><i class="fas fa-filter me-2"></i>查询筛选</h6>
                    <div class="filter-input-groups">
                        <div class="filter-group">
                            <label for="elderFilter" class="form-label">老人ID</label>
                            <input type="text" class="form-control" id="elderFilter" placeholder="输入老人ID" value="{{ request.args.get('elder', '') }}">
                        </div>
                        <div class="filter-group">
                            <label for="dateFilter" class="form-label">日期</label>
                            <input type="date" class="form-control" id="dateFilter" value="{{ request.args.get('date', date.today().isoformat()) }}">
                        </div>
                        <div class="filter-group">
                            <label for="timeSlotFilter" class="form-label">时间段</label>
                            <input type="text" class="form-control" id="timeSlotFilter" placeholder="输入时间段（如08:00-08:30）">
                        </div>
                        <div class="filter-group d-flex align-items-end">
                            <button id="filterButton" class="btn tech-btn tech-btn-primary w-100">
                                <i class="fas fa-search me-2"></i>查询
                            </button>
                        </div>
                    </div>
                </div>
                
                {% if time_slots %}
                <div class="summary-card">
                    <h6 class="summary-title"><i class="fas fa-info-circle me-2"></i>基本信息</h6>
                    <div class="summary-item">
                        <span>老人ID:</span>
                        <span>{{ time_slots[0].elder_id }}</span>
                    </div>
                    <div class="summary-item">
                        <span>日期:</span>
                        <span>{{ time_slots[0].date }}</span>
                    </div>
                    <div class="summary-item">
                        <span>总时间段数:</span>
                        <span>{{ time_slots|length }}</span>
                    </div>
                    <div class="summary-item">
                        <span>批次号:</span>
                        <span>{{ time_slots[0].batch_number if time_slots[0].batch_number else '无' }}</span>
                    </div>
                </div>
                {% endif %}
                
                <div class="table-responsive">
                    <table class="table time-slot-table">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>老人ID</th>
                                <th>日期</th>
                                <th>时间段</th>
                                <th>活动</th>
                                <th>活动ID</th>
                                <th>护理员</th>
                                <th>护理员ID</th>
                                <th>批次号</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for slot in time_slots %}
                            <tr>
                                <td>{{ slot.id }}</td>
                                <td>{{ slot.elder_id }}</td>
                                <td>{{ slot.date }}</td>
                                <td>{{ slot.time_slot }}</td>
                                <td>
                                    <span class="activity-tag">{{ slot.activity }}</span>
                                </td>
                                <td>{{ slot.activity_id }}</td>
                                <td>
                                    {% if slot.caregiver and slot.caregiver != 'None' %}
                                    <span class="caregiver-badge">{{ slot.caregiver }}</span>
                                    {% else %}
                                    <span class="text-muted">无</span>
                                    {% endif %}
                                </td>
                                <td>{{ slot.caregiver_id }}</td>
                                <td>{{ slot.batch_number if slot.batch_number else '无' }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                
                {% if time_slots %}
                <div class="d-flex justify-content-between align-items-center mt-3">
                    <div>
                        <span class="text-light">显示 <span id="visibleCount">{{ time_slots|length }}</span> 条记录，共 <span id="totalCount">{{ time_slots|length }}</span> 条记录</span>
                    </div>
                    <div>
                        <button id="exportButton" class="btn tech-btn tech-btn-success">
                            <i class="fas fa-file-excel"></i> 导出到Excel
                        </button>
                    </div>
                </div>
                
                {% if time_slots|length > 20 %}
                <nav aria-label="时间段分页">
                    <ul class="pagination justify-content-center" id="pagination">
                        <!-- 分页将通过JavaScript生成 -->
                    </ul>
                </nav>
                {% endif %}
                {% else %}
                <div class="text-center p-4 text-light">
                    <i class="fas fa-info-circle fa-3x mb-3"></i>
                    <h5>没有符合条件的数据</h5>
                    <p>请调整筛选条件后重试</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    $(document).ready(function() {
        // 筛选功能
        $("#filterButton").click(function() {
            var elderFilter = $("#elderFilter").val().toLowerCase();
            var dateFilter = $("#dateFilter").val();
            var timeSlotFilter = $("#timeSlotFilter").val().toLowerCase();
            
            var visibleCount = 0;
            var totalCount = $(".time-slot-table tbody tr").length;
            
            $(".time-slot-table tbody tr").each(function() {
                var elder = $(this).find("td:eq(1)").text().toLowerCase();
                var date = $(this).find("td:eq(2)").text();
                var timeSlot = $(this).find("td:eq(3)").text().toLowerCase();
                
                var elderMatch = elderFilter === "" || elder.includes(elderFilter);
                var dateMatch = dateFilter === "" || date === dateFilter;
                var timeSlotMatch = timeSlotFilter === "" || timeSlot.includes(timeSlotFilter);
                
                if (elderMatch && dateMatch && timeSlotMatch) {
                    $(this).show();
                    visibleCount++;
                } else {
                    $(this).hide();
                }
            });
            
            $("#visibleCount").text(visibleCount);
            $("#totalCount").text(totalCount);
            
            // 重新生成分页
            if (visibleCount > 20) {
                generatePagination(visibleCount);
            } else {
                $("#pagination").empty();
            }
        });
        
        // 导出到Excel功能
        $("#exportButton").click(function() {
            // 创建一个工作表
            var csv = [];
            // 获取表头
            var headerRow = [];
            $(".time-slot-table thead th").each(function() {
                headerRow.push($(this).text());
            });
            csv.push(headerRow.join(","));
            
            // 获取可见行的数据
            $(".time-slot-table tbody tr:visible").each(function() {
                var row = [];
                $(this).find("td").each(function() {
                    row.push($(this).text().trim());
                });
                csv.push(row.join(","));
            });
            
            // 下载CSV文件
            var csvContent = csv.join("\n");
            var blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
            var link = document.createElement("a");
            var url = URL.createObjectURL(blob);
            link.setAttribute("href", url);
            link.setAttribute("download", "照护计划分表_" + $("#dateFilter").val() + "_" + $("#elderFilter").val() + ".csv");
            link.style.visibility = "hidden";
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        });
        
        // 分页功能
        function generatePagination(totalRecords) {
            var pageSize = 20;
            var totalPages = Math.ceil(totalRecords / pageSize);
            var currentPage = 1;
            
            // 创建分页控件
            $("#pagination").empty();
            
            // 上一页按钮
            $("#pagination").append(
                '<li class="page-item' + (currentPage === 1 ? ' disabled' : '') + '">' +
                '<a class="page-link" href="#" data-page="prev" aria-label="Previous">' +
                '<span aria-hidden="true">&laquo;</span>' +
                '</a>' +
                '</li>'
            );
            
            // 页码按钮
            for (var i = 1; i <= totalPages; i++) {
                $("#pagination").append(
                    '<li class="page-item' + (i === currentPage ? ' active' : '') + '">' +
                    '<a class="page-link" href="#" data-page="' + i + '">' + i + '</a>' +
                    '</li>'
                );
            }
            
            // 下一页按钮
            $("#pagination").append(
                '<li class="page-item' + (currentPage === totalPages ? ' disabled' : '') + '">' +
                '<a class="page-link" href="#" data-page="next" aria-label="Next">' +
                '<span aria-hidden="true">&raquo;</span>' +
                '</a>' +
                '</li>'
            );
            
            // 页码点击事件
            $(".page-link").click(function(e) {
                e.preventDefault();
                
                var page = $(this).data("page");
                
                if (page === "prev") {
                    if (currentPage > 1) {
                        currentPage--;
                    }
                } else if (page === "next") {
                    if (currentPage < totalPages) {
                        currentPage++;
                    }
                } else {
                    currentPage = page;
                }
                
                // 更新当前页码
                $(".page-item").removeClass("active");
                $(".page-item").eq(currentPage).addClass("active");
                
                // 显示当前页的数据
                showPage(currentPage, pageSize);
                
                // 更新上一页和下一页按钮状态
                $(".page-item").first().toggleClass("disabled", currentPage === 1);
                $(".page-item").last().toggleClass("disabled", currentPage === totalPages);
            });
            
            // 初始显示第一页
            showPage(currentPage, pageSize);
        }
        
        function showPage(page, pageSize) {
            var visibleRows = $(".time-slot-table tbody tr:visible");
            var startIndex = (page - 1) * pageSize;
            var endIndex = startIndex + pageSize;
            
            visibleRows.hide();
            visibleRows.slice(startIndex, endIndex).show();
        }
        
        // 如果数据超过20条，初始化分页
        if ($(".time-slot-table tbody tr").length > 20) {
            generatePagination($(".time-slot-table tbody tr").length);
        }
    });
</script>
{% endblock %}
